<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue.js"></script>
    <script src="vue-router.js"></script>
</head>
<body>
        <div id="app">
                <router-link to="/">home</router-link>
            <router-link to="/foo">Go to Foo</router-link>
            <router-link to="/bar">Go to Bar</router-link>
            <router-link to="/yon">用户</router-link>
            <router-view></router-view>
        </div>
      <template id="yongh">
        <div>
            
            用户个人
            <router-view></router-view>
        <div>
      </template>
      <template id="yongh1">
            <div>我的页面{{$route.params.username }}<div>
         <router-view></router-view>

     </template>
     <template id="yongh2">
            <div>不能说的密码<div>
         <router-view></router-view>

     </template>
 
 
     <template id="base">
            <div>
                <ul>
                    <li>姓名</li>
                    <li>性别</li>
                    <li>年龄</li>
                </ul>
                
                
            <div>
         
     </template>
     <template id="base1">
            <div>
               个人详细资料 
                
            <div>
         
     </template>
          <script>
           const Home = { template: '<div>home</div>' }
            const Foo = { template : '<div>foo</div>' }
            const Bar = { template: '<div>bar</div>' }
            const Yon = { template: '#yongh' }
            const usera = { template: '#yongh1', }
            const base = { template: '#base', }
            const base1 = { template: '#base1', }
            const routes = [
                        {path:'/',component:Home},
                        { path: '/foo', component: Foo },
                        { path: '/bar', component: Bar },
                        { path: '/yon', component: Yon,
                     
                        children:[
                                {
                                    path:':username',
                                    component:usera,
                                    children:[

                                        {
                                            path:'base',
                                            component:base
                                        },
                                        
                                        {
                                            path:'base1',
                                            component:base1
                                        }
                                    ]
                                   
                                }



                        ]
                        
                        
                        }
                         
                        ]
            const router=new VueRouter({
                routes
            });

            new Vue({
                el:'#app',
                router
            });
          </script>
</body>
</html>